<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./output.css">
</head>

<body>
    <div class="container">
        <!-- <div class="relative rounded-xl overflow-auto p-4 "> -->
        <h2>palce-self-auto</h2>
        <div class="grid grid-cols-3 gap-4 place-iems-stretch font-mono text-white text-sm font-bold leading-6">
            <div
                class="p-8 rounded-lg flex items-center justify-center bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
                01</div>
            <div class="p-8 rounded-lg flex items-center justify-center bg-indigo-500 shadow-lg palce-self-auto">02
            </div>
            <div
                class="p-8 rounded-lg flex items-center justify-center bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
                03</div>
            <div
                class="p-8 rounded-lg flex items-center justify-center bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
                04</div>
            <div
                class="p-8 rounded-lg flex items-center justify-center bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
                05</div>
            <div
                class="p-8 rounded-lg flex items-center justify-center bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
                06</div>
        </div>
        <h2>place-self-start </h2>
        <div class="relative rounded-xl overflow-auto p-8">
            <div class="grid grid-cols-3 gap-4 place-iems-stretch font-mono text-white text-sm font-bold leading-6">
                <div
                    class="p-8 rounded-lg flex items-center justify-center bg-purple-300 dark:bg-purple-800 dark:text-purple-400">
                    01</div>
                <div class="bg-stripes-purple rounded-lg grid">
                    <div class="w-14 h-14 rounded-lg flex items-center justify-center
                         bg-purple-500 shadow-lg place-self-start">
                        02</div>
                </div>
                <div
                    class="p-8 rounded-lg flex items-center justify-center bg-purple-300 dark:bg-purple-800 dark:text-purple-400">
                    03</div>
                <div
                    class="p-8 rounded-lg flex items-center justify-center bg-purple-300 dark:bg-purple-800 dark:text-purple-400">
                    04</div>
                <div
                    class="p-8 rounded-lg flex items-center justify-center bg-purple-300 dark:bg-purple-800 dark:text-purple-400">
                    05</div>
                <div
                    class="p-8 rounded-lg flex items-center justify-center bg-purple-300 dark:bg-purple-800 dark:text-purple-400">
                    06</div>
            </div>
        </div>
        <h2>place-self-center</h2>
        <div class="grid grid-cols-3 gap-4 place-iems-stretch font-mono text-white text-sm font-bold leading-6">
            <div class="p-8 rounded-lg flex items-center justify-center bg-sky-300 dark:bg-sky-800 dark:text-sky-500">01
            </div>
            <div class="bg-stripes-sky rounded-lg grid">
                <div class="w-14 h-14 rounded-lg flex items-center justify-center
                     bg-sky-500 shadow-lg place-self-center">
                    02</div>
            </div>
            <div class="p-8 rounded-lg flex items-center justify-center bg-sky-300 dark:bg-sky-800 dark:text-sky-500">03
            </div>
            <div class="p-8 rounded-lg flex items-center justify-center bg-sky-300 dark:bg-sky-800 dark:text-sky-500">04
            </div>
            <div class="p-8 rounded-lg flex items-center justify-center bg-sky-300 dark:bg-sky-800 dark:text-sky-500">05
            </div>
            <div class="p-8 rounded-lg flex items-center justify-center bg-sky-300 dark:bg-sky-800 dark:text-sky-500">06
            </div>
        </div>
        <h2>place-self-end</h2>
        <div class="relative rounded-xl overflow-auto p-8">
            <div class="grid grid-cols-3 gap-4 place-iems-stretch font-mono text-white text-sm font-bold leading-6">
                <div
                    class="p-8 rounded-lg flex items-center justify-center bg-pink-300 dark:bg-pink-800 dark:text-pink-400">
                    01</div>
                <div class="bg-stripes-pink rounded-lg grid">
                    <div class="w-14 h-14 rounded-lg flex items-center justify-center
                         bg-pink-500 shadow-lg place-self-end">
                        02</div>
                </div>
                <div
                    class="p-8 rounded-lg flex items-center justify-center bg-pink-300 dark:bg-pink-800 dark:text-pink-400">
                    03</div>
                <div
                    class="p-8 rounded-lg flex items-center justify-center bg-pink-300 dark:bg-pink-800 dark:text-pink-400">
                    04</div>
                <div
                    class="p-8 rounded-lg flex items-center justify-center bg-pink-300 dark:bg-pink-800 dark:text-pink-400">
                    05</div>
                <div
                    class="p-8 rounded-lg flex items-center justify-center bg-pink-300 dark:bg-pink-800 dark:text-pink-400">
                    06</div>
            </div>
        </div>
        <h2>place-self-stretch</h2>
        <div class="grid grid-cols-3 gap-4 place-iems-stretch font-mono text-white text-sm font-bold leading-6">
            <div
                class="p-8 rounded-lg flex items-center justify-center bg-fuchsia-300 dark:bg-fuchsia-800 dark:text-fuchsia-400">
                01</div>
            <div class="p-8 rounded-lg flex items-center justify-center
             bg-fuchsia-500 shadow-lg place-self-stretch">
                02</div>
            <div
                class="p-8 rounded-lg flex items-center justify-center bg-fuchsia-300 dark:bg-fuchsia-800 dark:text-fuchsia-400">
                03</div>
            <div
                class="p-8 rounded-lg flex items-center justify-center bg-fuchsia-300 dark:bg-fuchsia-800 dark:text-fuchsia-400">
                04</div>
            <div
                class="p-8 rounded-lg flex items-center justify-center bg-fuchsia-300 dark:bg-fuchsia-800 dark:text-fuchsia-400">
                05</div>
            <div
                class="p-8 rounded-lg flex items-center justify-center bg-fuchsia-300 dark:bg-fuchsia-800 dark:text-fuchsia-400">
                06</div>
        </div>
        <!-- </div> -->
    </div>
    <h2>
    </h2>
    <div class="container">

    </div>


</body>

</html>